<template>
  <div></div>
</template>

<script lang="ts">
import { Component, Watch} from 'vue-property-decorator'
import { watch, computed} from 'vue';
import Mixins from './CMixins.vue'
import { getModules } from '~/assets/modules/arcgisAPI'
import store from '~/assets/modules/store'
import { searchFeatures, searchFields } from '@/assets/modules/areaUtils'
import EsriJSONUtils from '@/assets/modules/esriJSONUtils'
import { setFilter } from '@/assets/modules/esriLayer'
import exportVue from '@/assets/modules/exportVue'
// import _ from "loadsh";
@Component({ name: 'GridHandler', components: {} })
export default class extends Mixins {
  get gridmanData() {
    return this.$store.getters['panelData/gridmanData']
  }
  get zlxmData() {
    return this.$store.getters['panelData/zlxmData']
  }
  get zlqyData() {
    return this.$store.getters['panelData/zlqyData']
  }
  get jjjgData() {
    return this.$store.getters['panelData/jjjgData']
  }
  get gridData() {
    return this.$store.getters['panelData/gridData']
  }
  get gridLastData() {
    return this.$store.getters['panelData/gridLastData']
  }
  // @Watch('zlxmData', {  deep: true,  immediate: true })
  // handleZlxmData() {
  //   this.initLayerData()
  // }
  // @Watch('zlqyData', { deep: true, immediate: true })
  // handleZlqyData() {
  //   this.initLayerData()
  // }
  // @Watch('jjjgData', { deep: true, immediate: true })
  // handleJjjgData() {
  //   this.initLayerData()
  // }
  // @Watch('gridData', { deep: true, immediate: true })
  // handleGridData(val: any) {
  //   // gridData没有数据
  //   this.initLayerData()
  //   if (val.length > 0) {
  //     this.createGraphic('wgfw').then((graphics) => {
  //       this.gridGraphics = graphics
  //       this.gridLabelGraphics = graphics.map((el: any) => {
  //         const feature = el.clone()
  //         feature.geometry = el.geometry?.centroid?.clone() ?? {}
  //         return feature
  //       })
  //       this.addFeatureLayerGrid(this.gridGraphics)
  //       this.addFeatureLayerGridLabel(this.gridLabelGraphics)
  //     })
  //   }
  // }
  // @Watch('gridLastData', { deep: true })
  // handleGridLastData() {
  //   this.createGraphic('wgfwLast').then((graphics) => {
  //     this.gridLastGraphics = graphics
  //     this.addFeatureLayerGridLast(this.gridLastGraphics)
  //   })
  // }
  private gridmanGraphics: any[] = []
  private zlxmGraphics: any[] = []
  private zlqyGraphics: any[] = []
  private jjjgGraphics: any[] = []
  private gridGraphics: any[] = []
  private gridLabelGraphics: any[] = []
  private gridLastGraphics: any[] = []
  private timer:any = null;
  get loaded2d() {
    return this.$store.getters['view/loaded2d']
  }

  @Watch('loaded2d')
  handleLoaded2d() {
    if (this.loaded2d) {
      // this.addFeatureLayer("gridman", this.gridmanGraphics);
      // this.addFeatureLayer("zlxm", this.zlxmGraphics);
      // this.addFeatureLayer("zlqy", this.zlqyGraphics);
      // this.addFeatureLayer("jjjg", this.jjjgGraphics);
      this.addFeatureLayerGrid(this.gridGraphics)
      this.addFeatureLayerGridLabel(this.gridLabelGraphics)
      this.addFeatureLayerGridLast(this.gridLastGraphics)
    }
  }
  initWatch(){
    const _this = this
    const gridmanData = computed(() => _this.$store.getters['panelData/gridmanData']);
    const zlxmData = computed(() => _this.$store.getters['panelData/zlxmData']);
    const zlqyData = computed(() => _this.$store.getters['panelData/zlqyData']);
    const jjjgData = computed(() => _this.$store.getters['panelData/jjjgData']);
    const gridData = computed(() => _this.$store.getters['panelData/gridData']);
    watch(gridmanData, () => {
      _this.initLayerData();
    }, {
      deep: true,
      immediate: true
    });
    const gridLastData = computed(() => _this.$store.getters['panelData/gridLastData']);
    watch(zlxmData, () => {
      _this.initLayerData();
    }, {
      deep: true,
      immediate: true
    });
    watch(zlqyData, () => {
      _this.initLayerData();
    }, {
      deep: true,
      immediate: true
    });
    watch(jjjgData, () => {
      _this.initLayerData();
    }, {
      deep: true,
      immediate: true
    });
    watch(gridData, (val: any) => {
         // gridData没有数据
      _this.initLayerData()
      if (val.length > 0) {
        _this.createGraphic('wgfw').then((graphics) => {
          _this.gridGraphics = graphics
          _this.gridLabelGraphics = graphics.map((el: any) => {
            const feature = el.clone()
            feature.geometry = el.geometry?.centroid?.clone() ?? {}
            return feature
          })
          _this.addFeatureLayerGrid(this.gridGraphics)
           _this.addFeatureLayerGridLabel(this.gridLabelGraphics)
        })
      }
    }, {
      deep: true,
      immediate: true
    });
    watch(gridLastData, () => {
      _this.createGraphic('wgfwLast').then((graphics) => {
      this.gridLastGraphics = graphics
      this.addFeatureLayerGridLast(this.gridLastGraphics)
    })
    }, {
      deep: true,
      immediate: true
    });
  }
  mounted() {
    this.initWatch()

    this.handleAreaSelect()
    this.initLayerData()
  }

  beforeDestroy() {
    if (this.view) {
      if (store.gridmanLayer) {
        store.gridmanLayer.visible = false
      }
      if (store.zlxmLayer) {
        store.zlxmLayer.visible = false
      }
      if (store.zlqyLayer) {
        store.zlqyLayer.visible = false
      }
      if (store.jjjgLayer) {
        store.jjjgLayer.visible = false
      }
      if (store.wgfwLayer) {
        store.wgfwLayer.visible = false
      }
      if (store.wgfwLabelLayer) {
        store.wgfwLabelLayer.visible = false
      }
    }
    this.destroy()
  }
  initLayerData() {
    if (store.gridmanLayer) {
      store.gridmanLayer.visible = store.gridmanLayerVisible
    } else {
      this.createGraphic('gridman').then((graphics) => {
        this.gridmanGraphics = graphics
        this.addFeatureLayer('gridman', graphics)
      })
    }
    if (store.zlxmLayer) {
      store.zlxmLayer.visible = store.zlxmLayerVisible
    } else {
      this.createGraphic('zlxm').then((graphics) => {
        this.zlxmGraphics = graphics
        this.addFeatureLayer('zlxm', graphics)
      })
    }
    if (store.zlqyLayer) {
      store.zlqyLayer.visible = store.zlqyLayerVisible
    } else {
      this.createGraphic('zlqy').then((graphics) => {
        this.zlqyGraphics = graphics
        this.addFeatureLayer('zlqy', graphics)
      })
    }
    if (store.jjjgLayer) {
      store.jjjgLayer.visible = store.jjjgLayerVisible
    } else {
      this.createGraphic('jjjg').then((graphics) => {
        this.jjjgGraphics = graphics
        this.addFeatureLayer('jjjg', graphics)
      })
    }
    if (store.wgfwLayer) {
      store.wgfwLayer.visible = store.wgfwLayerVisible
      if (store.wgfwLabelLayer) {
        store.wgfwLabelLayer.visible = store.wgfwLayerVisible
      }
    } else {
      this.createGraphic('wgfw').then((graphics) => {
        this.gridGraphics = graphics
        this.gridLabelGraphics = graphics.map((el: any) => {
          const feature = el.clone()
          feature.geometry = el?.geometry?.centroid?.clone() ?? {}
          return feature
        })
        this.addFeatureLayerGrid(this.gridGraphics)
        this.addFeatureLayerGridLabel(this.gridLabelGraphics)
      })
    }
    if (store.wgfwLastLayer) {
    } else {
      this.createGraphic('wgfwLast').then((graphics) => {
        this.gridLastGraphics = graphics
        this.addFeatureLayerGridLast(this.gridLastGraphics)
      })
    }
  }
  // 创建点
  async createGraphic(type: any) {
    const modules = await getModules(['esri/Graphic'])
    const [Graphic] = modules
    const graphics: any[] = []
    if (type == 'gridman') {
      this.gridmanData.forEach((el: any) => {
        const { point, sfid } = el
        if (point) {
          const graphic = new Graphic({
            geometry: {
              x: point.x,
              y: point.y,
              type: 'point',
              spatialReference: store.spatialReference
            },
            attributes: { objectId: sfid, field1: el.gridYuanName, field2: el.gridName, field3: el.contact }
          })
          graphics.push(graphic)
        }
      })
    } else if (type == 'zlxm') {
      this.zlxmData.forEach((el: any) => {
        const { xzb, yzb, sfid } = el
        const graphic = new Graphic({
          geometry: {
            x: parseFloat(xzb),
            y: parseFloat(yzb),
            type: 'point',
            spatialReference: store.spatialReference
          },
          attributes: {
            objectId: sfid,
            field1: el.xmmc,
            field2: el.yydws,
            field3: this.getZlxmlx(el.zlxmlx),
            field4: el.xmdz,
            field5: el.gyzts,
            field6: this.getXmbq(el.xmbq),
            field7: this.getXmrsqk(el.xmrsqk)
          }
        })
        graphics.push(graphic)
      })
    } else if (type == 'zlqy') {
      this.zlqyData.forEach((el: any) => {
        const { xzb, yzb, sfid } = el
        const graphic = new Graphic({
          geometry: {
            x: parseFloat(xzb),
            y: parseFloat(yzb),
            type: 'point',
            spatialReference: store.spatialReference
          },
          attributes: { objectId: sfid, field1: el.jgmc, field2: el.tyshxydm, field3: el.lxdh }
        })
        graphics.push(graphic)
      })
    } else if (type == 'jjjg') {
      this.jjjgData.forEach((el: any) => {
        const { zbx, zby, sfid } = el
        const graphic = new Graphic({
          geometry: {
            x: parseFloat(zbx),
            y: parseFloat(zby),
            type: 'point',
            spatialReference: store.spatialReference
          },
          attributes: { objectId: sfid, field1: el.netjgmc, field2: el.nettyshxydm, field3: el.netfaddblxdh }
        })
        graphics.push(graphic)
      })
    } else if (type == 'wgfw') {
      this.gridData.forEach((el: any) => {
        if(el.geoJsonObject){
          const rings = EsriJSONUtils.geoJSONToEsriJSON(el.geoJsonObject).rings
          const graphic = new Graphic({
            geometry: {
              rings,
              type: 'polygon',
              spatialReference: store.spatialReference
            },
            attributes: {
              objectId: el.gridId,
              sfid: el.sfid,
              qjmc: el.qjmc,
              wgid: el.gridId,
              wgname: el.gridName
           }
          })
          graphics.push(graphic)
        }
      })
    } else {
      this.gridLastData.forEach((el: any) => {
        const rings = EsriJSONUtils.geoJSONToEsriJSON(el.geoJsonObject).rings
        const graphic = new Graphic({
          geometry: {
            rings,
            type: 'polygon',
            spatialReference: store.spatialReference
          },
          attributes: {
            objectId: el.gridId,
            sfid: el.sfid,
            qjmc: el.qjmc,
            wgid: el.gridId,
            wgname: el.gridName
          }
        })
        graphics.push(graphic)
      })
    }
    return graphics
  }
  // 添加图层
  async addFeatureLayer(type: string, graphics: any[]) {
    if (!this.view) {
      return
    }
    const modules = await getModules(['esri/layers/FeatureLayer'])
    // const modules1 = await getModules(["esri/support/actions/ActionButton"]);
    const [FeatureLayer] = modules
    // const [ActionButton] = modules1;

    const that = this
    const popupDOM: any = document.querySelectorAll('.esri-popup')[0]

    // const func = this.debounce(
    //   () => {
    //     //控制防抖
    //     clearTimeout(this.timer);
    //     this.timer = setTimeout(()=>{
    //       console.log('ffffffzzzzzppppp')
    //     },100)
    //   },
    //   1000,
    //   false
    // )
    popupDOM.addEventListener('click', this.debounce, true)
    // 添加弹出框内容
    const gridmanTemplate = {
      title: '房管员（{field2}）',
      content:
        '<div>' +
        '<div><span>所属网格:</span><span>{field1}</span></div>' +
        '<div><span>人名:</span><span>{field2}</span></div>' +
        '<div><span>电话:</span><span>{field3}</span></div>' +
        '</div>',
      overwriteActions: true
    }

    const zlxmTemplate = {
      title: '项目（{field1}）',
      content:
        '<div>' +
        '<div><span>项目名称:</span><span>{field1}</span></div>' +
        '<div><span>运营单位:</span><span>{field2}</span></div>' +
        '<div><span>租赁项目类型:</span><span>{field3}</span></div>' +
        '<div><span>项目地址:</span><span>{field4}</span></div>' +
        '<div><span>套数:</span><span>{field5}</span></div>' +
        '<div><span>项目标签:</span><span>{field6}</span></div>' +
        '<div><span>入市情况:</span><span>{field7}</span></div>' +
        '</div>',
      overwriteActions: true
    }
    const zlqyAndJgTemplate = {
      title: '企业/经纪机构（{field1}）',
      content:
        '<div>' +
        '<div><span>企业名称:</span><span>{field1}</span></div>' +
        '<div><span>统一社会信用代码:</span><span>{field2}</span></div>' +
        '<div><span>联系电话:</span><span>{field3}</span></div>' +
        '</div>',
      overwriteActions: true
    }

    const layer = new FeatureLayer({
      spatialReference: store.spatialReference,
      source: graphics.map((el) => {
        return el.clone()
      }),
      fields: [
        {
          name: 'objectId',
          alias: 'objectId',
          type: 'oid'
        },
        {
          name: 'field1',
          alias: 'field1',
          type: 'string'
        },
        {
          name: 'field2',
          alias: 'field2',
          type: 'string'
        },
        {
          name: 'field3',
          alias: 'field3',
          type: 'string'
        },
        {
          name: 'field4',
          alias: 'field4',
          type: 'string'
        },
        {
          name: 'field5',
          alias: 'field5',
          type: 'string'
        },
        {
          name: 'field6',
          alias: 'field6',
          type: 'string'
        },
        {
          name: 'field7',
          alias: 'field7',
          type: 'string'
        }
      ],
      objectIdField: 'objectId',
      geometryType: 'point',
      popupTemplate: type === 'gridman' ? gridmanTemplate : type === 'zlxm' ? zlxmTemplate : zlqyAndJgTemplate,
      elevationInfo: { mode: 'relative-to-ground', offset: 20 },
      renderer: {
        type: 'simple',
        symbol: this.getSymbol(type)
      }
    })
    if(type == 'gridman' || type == 'zlxm' || type == 'zlqy' || type == 'jjjg'){
      layer.visible = false
    }
    this.view.map.add(layer)
    if (type == 'gridman') {
      store.gridmanLayer = layer
    } else if (type == 'zlxm') {
      store.zlxmLayer = layer
    } else if (type == 'zlqy') {
      store.zlqyLayer = layer
    } else if (type == 'jjjg') {
      store.jjjgLayer = layer
    }
  }
  getZlxmlx(zlxmlx: any) {
    switch (parseInt(zlxmlx)) {
      case 1:
        return '新建项目'
      case 2:
        return '改建项目'
      case 3:
        return '盘活项目'
      case 4:
        return '运营项目'
    }
  }
  getXmbq(xmbq: any) {
    const returnList = []
    if(xmbq){
      if(xmbq.indexOf('bzxzlzf') > -1){
        returnList.push('保障性租赁住房')
      }
      if(xmbq.indexOf('zycb') > -1){
        returnList.push('中央财补')
      }
      if(xmbq.indexOf('dfcb') > -1){
        returnList.push('地方财补')
      }
      if(xmbq.indexOf('bzxzf') > -1){
        returnList.push('保障性住房')
      }
      if(xmbq.indexOf('zcfc') > -1){
        returnList.push('非改租')
      }
      if(xmbq.indexOf('gf') > -1){
        returnList.push('公房')
      }
      if(xmbq.indexOf('zcxschfy') > -1){
        returnList.push('政策性市场化房源')
      }
    }
    const returnString = returnList.join(',')
    return returnString
  }
  getXmrsqk(xmrsqk: any) {
    switch (parseInt(xmrsqk)) {
      case 1:
        return '已入市'
      case 2:
        return '未入市'
    }
  }
  getDatas() {}
  // 添加图层
  async addFeatureLayerGrid(graphics: any[]) {
    if (!this.view) {
      return
    }
    this.view.map.remove(store.wgfwLayer)
    store.wgfwLayer = null
    this.view.map.remove(store.wgfwLabelLayer)
    store.wgfwLabelLayer = null
    const modules = await getModules(['esri/layers/FeatureLayer'])
    const [FeatureLayer] = modules
    const layer = new FeatureLayer({
      spatialReference: store.spatialReference,
      source: graphics.map((el) => {
        return el.clone()
      }),
      fields: [
        {
          name: 'objectId',
          alias: 'objectId',
          type: 'oid'
        },
        {
          name: 'qjmc',
          type: 'string',
          alias: 'QJMC',
          length: 50
        },
        {
          name: 'wgid',
          type: 'string',
          alias: 'WGID',
          length: 50
        },
        {
          name: 'wgname',
          type: 'string',
          alias: 'WGNAME',
          length: 255
        }
      ],
      objectIdField: 'objectId',
      geometryType: 'polygon',
      elevationInfo: { mode: 'relative-to-ground', offset: 20 },
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-fill',
          style: 'solid',
          color: [227, 139, 79, 0],
          outline: {
            color: '#0d8e0d',
            width: 2
          }
        }
      }
    })
    this.view.map.add(layer)
    store.wgfwLayer = layer
    store.wgfwLayer.visible = store.wgfwLayerVisible
  }
  // 添加图层
  async addFeatureLayerGridLabel(graphics: any[]) {
    if (!this.view) {
      return
    }
    const modules = await getModules(['esri/layers/FeatureLayer'])
    const [FeatureLayer] = modules
    const name = '$feature.wgname'
    const nameClass = {
      where: '1=1',
      labelPlacement: 'center-center',
      labelExpressionInfo: {
        expression: name
      },
      symbol: {
        type: 'text',
        color: 'black',
        haloColor: 'white',
        haloSize: 2,
        font: {
          size: 14
        }
      },
      minScale: 45000
    }
    const layer = new FeatureLayer({
      spatialReference: store.spatialReference,
      source: graphics.map((el) => {
        return el.clone()
      }),
      fields: [
        {
          name: 'objectId',
          alias: 'objectId',
          type: 'oid'
        },
        {
          name: 'qjmc',
          type: 'string',
          alias: 'QJMC',
          length: 50
        },
        {
          name: 'wgid',
          type: 'string',
          alias: 'WGID',
          length: 50
        },
        {
          name: 'wgname',
          type: 'string',
          alias: 'WGNAME',
          length: 255
        }
      ],
      objectIdField: 'objectId',
      geometryType: 'point',
      elevationInfo: { mode: 'relative-to-ground', offset: 20 },
      labelingInfo: [nameClass],
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          size: 6,
          outline: null,
          color: [255, 255, 255, 0]
        }
      }
    })
    this.view.map.add(layer)
    store.wgfwLabelLayer = layer
    store.wgfwLabelLayer.visible = store.wgfwLayerVisible
  }
  // 添加图层
  async addFeatureLayerGridLast(graphics: any[]) {
    const modules = await getModules(['esri/layers/FeatureLayer'])
    const [FeatureLayer] = modules
    const layer = new FeatureLayer({
      spatialReference: store.spatialReference,
      source: graphics.map((el) => {
        return el.clone()
      }),
      fields: [
        {
          name: 'objectId',
          alias: 'objectId',
          type: 'oid'
        },
        {
          name: 'qjmc',
          type: 'string',
          alias: 'QJMC',
          length: 50
        },
        {
          name: 'wgid',
          type: 'string',
          alias: 'WGID',
          length: 50
        },
        {
          name: 'wgname',
          type: 'string',
          alias: 'WGNAME',
          length: 255
        }
      ],
      objectIdField: 'objectId',
      geometryType: 'polygon',
      elevationInfo: { mode: 'relative-to-ground', offset: 20 },
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-fill',
          style: 'solid',
          color: [227, 139, 79, 0],
          outline: {
            color: '#0d8e0d',
            width: 2
          }
        }
      }
    })
    store.wgfwLastLayer = layer
    store.wgfwLastLayer.visible = store.wgfwLayerVisible
  }
  // 二三维使用不同的样式
  private getSymbol(type: string) {
    const img =
      type == 'gridman'
        ? require('@/assets/images/points/fangguanyuan.png')
        : type == 'zlxm'
        ? require('@/assets/images/points/zulinxiangmu.png')
        : type == 'zlqy'
        ? require('@/assets/images/points/zulinqi.png')
        : require('@/assets/images/points/jingjijigou.png')
    return {
      type: 'picture-marker',
      url: img,
      width: '28px',
      height: '37px',
      yoffset: '20px'
    }
  }

  handleAreaSelect() {
    exportVue.$on('area-select', (param: any) => {
      this.drawGraphic(param.url, param.name, param.nameField, param.codeField, param.type, param.sqCodeList)
    })
    exportVue.$on('area-select-city', (url: any) => {
      this.addCityGraphic(url)
      const areaData = {
        areaCode: '',
        gridId: '',
        gridName: '',
        queryType: 0,
        sqCodeList: '',
        geoJson: '',
        areaType: 0,
        areaName: '厦门市',
        qjmc: ''
      }
      this.$store.commit('panelData/setAreaData', areaData)
      this.setAllFeatureLayerFilter()
    })
    exportVue.$on('grid-select-city', () => {
      this.setGridLayerFilter()
      const areaData = {
        areaCode: '',
        gridId: '',
        gridName: '厦门市',
        queryType: 1,
        sqCodeList: '',
        geoJson: '',
        areaType: 0,
        areaName: '',
        qjmc: ''
      }
      this.$store.commit('panelData/setAreaData', areaData)
      this.setAllFeatureLayerFilter()
    })
    exportVue.$on('grid-select-qjmc', (qjmc: any) => {
      this.setGridLayerFilter(undefined, qjmc)
      this.getGridGemotry(qjmc, 'qjmc', 1)
    })
    exportVue.$on('grid-select', (wgid: any) => {
      this.setGridLayerFilter(wgid)
      this.getGridGemotry(wgid, 'wgid', 2)
    })
  }
  async addCityGraphic(url: any) {
    if (!this.view) {
      return
    }
    searchFeatures(url).then((res: any) => {
      if (res.length > 0) {
        this.addGraphics(res)
      } else {
        this.clearGraphic()
      }
    })
  }
  async drawGraphic(url: any, name: any, nameField: string, codeField: string, type: number, sqCodeList: any) {
    if (!this.view) {
      return
    }
    const modules = await getModules(['esri/Graphic'])
    const [Graphic] = modules
    const where = `OBJECTID=${name}`
    searchFeatures(url, where).then((res: any) => {
      if (res.length > 0) {
        const geometry = res[0].geometry
        this.view.graphics.removeAll()
        if (geometry) {
          const fillSymbol = {
            type: 'simple-fill',
            color: [227, 139, 79, 0.1],
            outline: {
              color: [227, 139, 79, 0.8],
              width: 2
            }
          }
          const graphic = new Graphic({
            geometry,
            symbol: fillSymbol
          })
          this.view.graphics.add(graphic)
          const pointGraphic = new Graphic({
            geometry: geometry.centroid,
            symbol: this.getTextSymbol(res[0].attributes[nameField])
          })
          pointGraphic.id = name
          pointGraphic.name = res[0].attributes[nameField]
          this.view.graphics.add(pointGraphic)
          this.view.goTo({
            target: geometry
          })
          // geometry转geojson
          const geoJson = JSON.stringify(EsriJSONUtils.esriJSONToGeoJSON(geometry))
          const areaData = {
            areaCode: res[0].attributes[codeField],
            gridId: '',
            gridName: '',
            queryType: 0,
            sqCodeList: sqCodeList,
            geoJson: geoJson,
            areaType: type,
            areaName: res[0].attributes[nameField],
            qjmc: res[0].attributes.QJMC
          }
          this.$store.commit('panelData/setAreaData', areaData)
          this.setAllFeatureLayerFilter(geometry)
        }
      }
    })
  }
  setGridLayerFilter(wgid?: any, qjmc?: any) {
    if (store.wgfwLayer) {
      let where = '1=1'
      if (wgid) {
        where = "wgid = '" + wgid + "'"
      }
      if (qjmc) {
        where = "qjmc = '" + qjmc + "'"
      }
      const param = {
        layer: store.wgfwLayer,
        where: where,
        geometry: undefined,
        view: this.view
      }
      setFilter(param)
    }
    if (store.wgfwLabelLayer) {
      let where = '1=1'
      if (wgid) {
        where = "wgid = '" + wgid + "'"
      }
      if (qjmc) {
        where = "qjmc = '" + qjmc + "'"
      }
      const param = {
        layer: store.wgfwLabelLayer,
        where: where,
        geometry: undefined,
        view: this.view
      }
      setFilter(param)
    }
  }
  async getGridGemotry(name: any, field: string, type: number) {
    if (!this.view) {
      return
    }
    const modules = await getModules(['esri/geometry/geometryEngine'])
    const [geometryEngine] = modules
    this.view.whenLayerView(store.wgfwLayer).then((layerView: any) => {
      const query = layerView.createQuery()
      query.returnGeometry = true
      query.outFields = ['*']
      query.where = `${field}='${name}'`
      store.wgfwLayer.queryFeatures(query).then((results: any) => {
        if (results && results.features) {
          if (results.features.length > 0) {
            const geometries = results.features.map((item: any) => {
              return item.geometry
            })
            const geometry = geometryEngine.union(geometries)
            this.view.goTo({
              target: geometry
            })
            // geometry转geojson
            const geoJson = JSON.stringify(EsriJSONUtils.esriJSONToGeoJSON(geometry))
            const areaData = {
              areaCode: '',
              gridId: type == 2 ? name : '',
              gridName: type == 1 ? name : '',
              queryType: 1,
              sqCodeList: '',
              geoJson: geoJson,
              areaType: type,
              areaName: type == 1 ? name : '',
              qjmc: ''
            }
            this.$store.commit('panelData/setAreaData', areaData)
            this.setAllFeatureLayerFilter(geometry)
          } else {
            const areaData = {
              areaCode: '',
              gridId: type == 2 ? name : '',
              gridName: type == 1 ? name : '',
              queryType: 1,
              sqCodeList: '',
              geoJson: '',
              areaType: type,
              areaName: type == 1 ? name : '',
              qjmc: ''
            }
            this.$store.commit('panelData/setAreaData', areaData)
          }
        }
      })
    })
  }
  setAllFeatureLayerFilter(geometry?: any) {
    this.setFeatureLayerFilter(store.gridmanLayer, geometry)
    this.setFeatureLayerFilter(store.zlxmLayer, geometry)
    this.setFeatureLayerFilter(store.zlqyLayer, geometry)
    this.setFeatureLayerFilter(store.jjjgLayer, geometry)
  }
  setFeatureLayerFilter(layer: any, geometry: any) {
    if (layer) {
      const param = {
        layer: layer,
        where: '1=1',
        geometry: geometry ? geometry : undefined,
        view: this.view
      }
      setFilter(param)
    }
  }
  debounce(fn: Function, delay: number) {
    //控制防抖
    clearTimeout(this.timer);
    this.timer = setTimeout(()=>{
      console.log('ffffffzzzzzppppp')
    },100)
  }
  // debounce(func: Function, wait: number, immediate: boolean) {
  //   let timeout: any, args: any, context: any, timestamp: any, result: any
  //   const that: any = this
  //   const later = function () {
  //     // 据上一次触发时间间隔
  //     const last = +new Date() - timestamp
  //
  //     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
  //     if (last < wait && last > 0) {
  //       timeout = setTimeout(later, wait - last)
  //     } else {
  //       timeout = null
  //       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
  //       if (!immediate) {
  //         result = func.apply(context, args)
  //         if (!timeout) context = args = null
  //       }
  //     }
  //   }
  //   return function (...args: any): any {
  //     context = that
  //     timestamp = +new Date()
  //     const callNow = immediate && !timeout
  //     // 如果延时不存在，重新设定延时
  //
  //     if (!timeout) timeout = setTimeout(later, wait)
  //     if (callNow) {
  //       result = func.apply(context, args)
  //       context = args = null
  //     }
  //
  //     return result
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.test {
  color: aqua;
}
</style>
<style lang="scss">
.esri-popup__main-container {
  width: 100% !important;
  background-color: #011d3b;
  background-image: url(../../assets/images/dialogs/tanchuangbeijing.png);
  background-size: 100% 100%;
}
.esri-feature {
  background-color: #011d3b;
}
.esri-popup__header {
  // border-radius: 10px !important;
}
.esri-widget {
}
.esri-feature-content {
  background-color: #0b2644;
  color: #fff;
}
.esri-popup__navigation {
  background-color: #0b2644 !important;
}
.esri-popup__header-title {
  color: #fff;
}
.esri-popup__header-container--button:hover{
  background-color: #f3f3f333 !important;
}
</style>
